/* @flow */
import * as React from "react";
import {
    StyleSheet,
    Dimensions,
    ScrollView,
    View,
    TouchableOpacity,
    Text,
    Alert,
    DeviceEventEmitter,
    Modal,
    Button,
    SafeAreaView,
    UIManager,
    findNodeHandle,

} from "react-native";
import GoodCourseList from "./GoodCourseScene";
import OpenCourseScene from "./OpenCourseScene";
import SelectNavigation from '../../widget/select/SelectNavigation'
import SelectSubjectModal from "../../widget/select/SelectSubjectModal";

const {width} = Dimensions.get('window')

type Props = {
    navigation:any,
}

export default class SelectScene extends React.Component<Props, State> {

    static navigationOptions = ({navigation}: any) => ({
        header:null
    })

    constructor(props){
        super(props)
        this.state = {
            subject_show:false,
            subject_title:'一年级',
            course_index:0,
        }

    }

    selectGoodAndOpenCourse(index){
        this.scrollView.scrollTo({x:index,y:0,animated:true})
    }
   selectSubject(value){
       this.setState({subject_show:!this.state.subject_show});
       if (value){
           this.setState({subject_title:value});
       }
   }

    render() {
        return (

            <View style={{flex:1,}}>
                <SelectNavigation navigation={this.props.navigation} subject_title={this.state.subject_title} callbackSelectCourse={(index)=>{this.selectGoodAndOpenCourse(index)}} callbackSubject={()=>{this.selectSubject()}}/>
                <View style={styles.container}>
                    <ScrollView
                        ref = {(e) => {this.scrollView = e;}}
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        pagingEnabled={true}
                        alwaysBounceHorizontal={true}
                        scrollEnabled={false}
                    >
                        <GoodCourseList navigation={this.props.navigation} style={{flex:1}}/>
                        <OpenCourseScene navigation={this.props.navigation}/>
                    </ScrollView>
                </View>
                <SelectSubjectModal subject_title={this.state.subject_title} isShow={this.state.subject_show} callbackSubject={(item)=>{
                    this.selectSubject(item)
                }}/>
            </View>


        );
    }
}

const styles = StyleSheet.create({
    modal: {
        justifyContent: 'center',
        alignItems: 'center'
    },

    modal2: {
        height: 230,
        backgroundColor: "#3B5998"
    },
    text: {
        color: "black",
        fontSize: 22
    },

    modal3: {
        height: 300,
        width: 300
    },

    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    right_search_icon:{
        marginRight:18,
    },
    right_ri_li_icon:{
        marginRight:12,
    },
});
